{include file="common/head"/}
<style>
    .sort{
        width: 100px;
        height: 25px;
        text-align: center;
    }
    #pid{
        height: 32px;
        padding: 3px 28px;
    }
    .opts{
        line-height: 45px;
    }
    .opts>span{
        width: 88px;
        display: inline-block;
        text-align: right;
    }
    .opts input{
        height: 30px;
        padding-left: 10px;
        width: 260px;
    }
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{$title}</legend>
    </fieldset>
    <blockquote class="layui-elem-quote">
        <a href="javascript:add();" class="layui-btn layui-btn-sm">{:lang('add')}故障</a>
    </blockquote>
    <table class="layui-table">
        <thead>
        <tr>
            <th>编号</th>
            <th>故障名称</th>
            <th>描述</th>
            <th>排序</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="con">


        <!--<tr>
            <td class="visible-lg visible-md">2</td>
            <td class="text-left">关于我们</td>
            <td class="visible-lg visible-md">单页模型</td>
            <td class="visible-lg visible-md">单页模型</td>
            <td>
                <a class="blue" title="添加子故障" href="javascript:;"> <i class="icon icon-plus"></i></a> |
                <a class="green" href="" title="修改"><i class="icon icon-pencil2"></i></a> |
                <a class="red" href="javascript:del('2')" title="删除"><i class="icon icon-bin"></i></a>
            </td>
        </tr>-->


        </tbody>
        <tfoot>
    </table>
</div>
{include file="common/foot"/}
<script src="/public/static/common/js/jquery.2.1.1.min.js"></script>
<script>

    var cache = '';



    $.post('{:url("queryPage")}',callback);


    function callback(data) {
        var str = '';
        cache = data;
        $('#con').empty();

        $.each(data,function (k,v) {
            str = '<tr>';
            str += '<td class="visible-lg visible-md">'+v.id+'</td>';
            str += '<td class="text-left">'+v.title+'</td>';
            str += '<td class="visible-lg visible-md">'+v.desc+'</td>';
            str += '<td class="visible-lg visible-md"><input type="number" class="sort" onchange="sort(this)" d="'+v.id+'" value="'+v.sort+'"></td>';
            str += '<td>';
            str += '<a class="blue" title="添加子故障" href="javascript:add('+v.id+');"> <i class="icon icon-plus"></i></a> |';
            str += '<a class="green" href="javascript:edit('+v.id+',\'1\');" title="修改"><i class="icon icon-pencil2"></i></a> |';
            str += '<a class="red" href="javascript:del('+v.id+')" title="删除"><i class="icon icon-bin"></i></a>';
            str += '</td></tr>';

            if(v.children.length>0){
                str += tree(v.children);
            }
            $('#con').append(str);
        });
    }


    function tree(d){
        var strop = '';
        var spa = '';
        for(var i=0;i<d.length;i++){
            spa = '';
            strop += '<tr>';
            strop += '<td class="visible-lg visible-md">'+d[i].id+'</td>';
            for(var s=0;s<=d[i].level;s++){
                spa += '&nbsp;';
            }
            if(i==d.length-1)
                strop += '<td class="text-left">'+spa+'└─ '+d[i].title+'</td>';
            else
                strop += '<td class="text-left">'+spa+'├─ '+d[i].title+'</td>';
            strop += '<td class="visible-lg visible-md">'+d[i].desc+'</td>';
            strop += '<td class="visible-lg visible-md"><input type="number" class="sort" onchange="sort(this)" d="'+d[i].id+'" value="'+d[i].sort+'"></td>';
            strop += '<td>';
            strop += '<a class="blue" title="添加子故障" href="javascript:add('+d[i].id+');"> <i class="icon icon-plus"></i></a> |';
            strop += '<a class="green" href="javascript:edit('+d[i].id+',\'1\');" title="修改"><i class="icon icon-pencil2"></i></a> |';
            strop += '<a class="red" href="javascript:del('+d[i].id+')" title="删除"><i class="icon icon-bin"></i></a>';
            strop += '</td></tr>';

            if(d[i].children.length<=0){
            }else{
                (function(args){

                    for(var j=0;j<args.length;j++){
                        spa = '&nbsp;';
                        strop += '<tr>';
                        strop += '<td class="visible-lg visible-md">'+args[j].id+'</td>';
                        for(var s=0;s<=args[j].level;s++){
                            spa += '&nbsp;';
                        }
                        if(j==args.length-1)
                            strop += '<td class="text-left">'+spa+'└─ '+args[j].title+'</td>';
                        else
                            strop += '<td class="text-left">'+spa+'├─ '+args[j].title+'</td>';

                        strop += '<td class="visible-lg visible-md">'+args[j].desc+'</td>';
                        strop += '<td class="visible-lg visible-md"><input class="sort" type="number" onchange="sort(this)" d="'+args[j].id+'" value="'+args[j].sort+'"></td>';
                        strop += '<td>';
                        strop += '<a class="blue" title="添加子故障" href="javascript:add('+args[j].id+');"> <i class="icon icon-plus"></i></a> |';
                        strop += '<a class="green" href="javascript:edit('+args[j].id+',\'1\');" title="修改"><i class="icon icon-pencil2"></i></a> |';
                        strop += '<a class="red" href="javascript:del('+args[j].id+')" title="删除"><i class="icon icon-bin"></i></a>';
                        strop += '</td></tr>';

                        if(args[j].children.length <= 0){
                        }else{
                            arguments.callee(args[j].children);
                        }
                    }
                })(d[i].children)
            }
        }

        return strop;
    }


    layui.use('table', function(){
        var $= layui.jquery;

        $('body').on('blur','.list_order',function() {
            var id = $(this).attr('data-id');
            var sort = $(this).val();
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post('{:url("cOrder")}',{id:id,sort:sort},function(res){
                layer.close(loading);
                if(res.code === 1){
                    layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                        location.href = res.url;
                    });
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            })
        });

    });


    //排序
    function sort(_t) {
        var id = $(_t).attr('d');
        var sort = $(_t).val();
        var sub = {
            id:id,
            sort:sort
        };
        $.post('{:url("edit")}',sub,function (cal) {
            if(cal.code=1){
                layer.msg('排序成功',{icon:6});
            }else{
                layer.msg(cal.msg,{icon:5});
            }
        });
    }

    //删除
    function del(id) {
        layer.confirm('你确定要删除？', {icon: 3}, function (index) {
            $.post('{:url("del")}', {id: id}, function (data) {
                if (data.code === 1) {
                    layer.msg('删除成功！',{icon:6});
                    $.post('{:url("queryPage")}',callback);
                }else{
                    layer.msg(data.msg,{icon:5});
                }
            });
            layer.close(index);
        });
    }

    /**
     * 修改
     * @param id
     */
    function edit(id) {
        var tval = seac(id);
        add(tval.pid,tval)
    }

    //添加
    function add(id,of) {
        var str = '<div id="adds">';
        var url = '';
        var msg = '';
        str += '<div class="opts"><span >上级：</span>' +
                '<select name="pid" id="pid">' +
                '<option value="0">--顶级--</option>'+
            optree(cache,id)+
            '</select>'+
            '</div>';
        if(of){
            url = '{:url("edit")}';
            msg = '修改成功';
            str += '<div class="opts"><span>故障名称：</span><input type="text" name="title" value="'+of.title+'"></div>';
            str += '<div class="opts"><span>描述：</span><input type="text" name="desc" value="'+of.title+'"></div>';
            str += '<div class="opts"><span>排序：</span><input type="number" value="'+of.sort+'" name="sort" ></div>';
        }else{
            url = '{:url("add")}';
            msg = '添加成功';
            str += '<div class="opts"><span>故障名称：</span><input type="text" name="title"></div>';
            str += '<div class="opts"><span>描述：</span><input type="text" name="desc"></div>';
            str += '<div class="opts"><span>排序：</span><input type="number" value="1" name="sort"></div>';
        }


        str += '</div>';
        layer.open({
            title:'添加',
            btn:['确认','取消'],
            area:['440px','320px'],
            content:str,
            success:function () {
                
            },
            yes:function (index) {

                var obj = {
                    title:$.trim($('input[name=title]').val()),
                    desc:$.trim($('input[name=desc]').val()),
                    sort:$.trim($('input[name=sort]').val()),
                    pid:$('select[name=pid]').val(),
                };
                if(obj.pid!='0'){
                    var l = seac(obj.pid);
                    obj.level = l.level+1;
                }

                if(of){
                    obj.id = of.id;
                }

               $.post(url,obj,function (cal) {


                   if(cal.code=1){
                       layer.msg(msg,{icon:6});
                       $.post('{:url("queryPage")}',callback);
                   }else{
                       layer.msg(cal.msg,{icon:5});
                   }



               });
            }
        });
    }

    function seac(id) {
        var p = null;
        for(var i=0;i<cache.length;i++){
            if(id==cache[i].id){
                p = cache[i];
                break;
            }
            if(cache[i].children.length<=0){
            }else{
                (function(args){
                    for(var j=0;j<args.length;j++){
                        if(id==args[j].id){
                            p = args[j];
                            break;
                        }

                        if(args[j].children.length <= 0){
                        }else{
                            arguments.callee(args[j].children);
                        }
                    }
                })(cache[i].children)
            }
        }
        return p;
    }

    function optree(d,id) {
        var strop = '';
        var spa = '';
        for(var i=0;i<d.length;i++){
            strop += ' <option '+(d[i].id==id?"selected":"")+' value="'+d[i].id+'">'+d[i].title+'</option>';
            if(d[i].children.length<=0){
            }else{
                (function(args){
                    for(var j=0;j<args.length;j++){
                        spa = '';
                        for(var s=0;s<=args[j].level;s++){
                            spa += '&nbsp;';
                        }
                        if(j==args.length-1){
                            strop += ' <option '+(args[j].id==id?"selected":"")+' value="'+args[j].id+'">'+spa+'└─ '+args[j].title+'</option>';
                        }else{
                            strop += ' <option '+(args[j].id==id?"selected":"")+' value="'+args[j].id+'">'+spa+'├─ '+args[j].title+'</option>';
                        }

                        if(args[j].children.length <= 0){
                        }else{
                            arguments.callee(args[j].children);
                        }
                    }
                })(d[i].children)
            }
        }

        return strop;
    }


</script>